import { PlusOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import { useMemo, useState } from 'react';
import { YmTable, YmTablePorps } from 'ym-design';

export default function () {
  // 表格字段类型
  type TableRecord = {
    name: string;
    age: number;
    gender: number;
    email: string;
    address: string;
    create_time: string;
    guid: string;
  };
  // 查询字段类型
  type SearchValue = {
    name: string;
    gender: string;
  };

  const defaultColumns = useMemo<
    YmTablePorps<TableRecord, SearchValue>['columns']
  >(
    () => [
      {
        dataIndex: 'name',
        title: '姓名',
        key: 'name',
        fixed: 'left',
        width: 80,
      },
      {
        dataIndex: 'age',
        title: '年龄',
        key: 'age',
        width: 100,
      },
      {
        dataIndex: 'gender',
        title: '性别',
        key: 'gender',
        width: 80,
      },
      {
        dataIndex: 'email',
        title: '邮箱',
        key: 'email',
        width: 300,
      },
      {
        dataIndex: 'address',
        title: '地址',
        key: 'address',
        width: 300,
      },
      {
        dataIndex: 'create_time',
        title: '创建时间',
        key: 'create_time',
        width: 300,
      },
    ],
    [],
  );

  const [columns, setColumns] =
    useState<YmTablePorps<TableRecord, SearchValue>['columns']>(defaultColumns);

  //toolbar item click 回调
  const handleToolBarClick = (type: string, e: React.MouseEvent) => {
    console.log('--toolbar item click 回调--type--e--:', type, e);
  };

  //列显示回调函数
  const handleColumnsChage = (newColumns: any[], type: any) => {
    if (type.type !== 'reset') {
      setColumns(newColumns);
    } else {
      setColumns(defaultColumns);
    }
  };

  return (
    <div>
      <YmTable<TableRecord, SearchValue>
        columns={columns}
        rowKey="guid"
        searchForm={{
          formItems: [
            {
              name: 'name',
              label: '名称',
              valueType: {
                type: 'input',
              },
            },
          ],
        }}
        toolBar={{
          prefixNode: (
            <>
              <Button
                onClick={() => {
                  alert('可以做你自己的需求');
                }}
              >
                + 添加数据
              </Button>
            </>
          ),
          onBtnClick: handleToolBarClick,
          onColumnsChange: handleColumnsChage,
          items: [
            {
              key: 'columnsSetting',
            },
            {
              key: 'reFresh',
            },
            {
              key: 'add',
              children: (
                <Button
                  onClick={(e) => {
                    console.log(
                      '--ReactElement的click事件--e.target--:',
                      e.target,
                    );
                  }}
                  icon={<PlusOutlined />}
                />
              ),
            },
          ],
        }}
      />
    </div>
  );
}
